<template>
  <div id="diagTeDrawerDiv" v-if="drawerTemp" class="overlay" :class="{ 'fade-in': visible }">
    <Splitpanes class="default-theme" horizontal>
      <Pane>
        <el-divider content-position="left">诊断模板</el-divider>

        <div class="diag-temp">
          <div class="diag-item" v-for="diag in typeList" :key="diag.id">
            <el-tag type="success" size="small" @click="diag.isCollapse = !diag.isCollapse">
              <!-- <template #default> -->
              {{ diag.name }}
              <span :class="diag.isCollapse
                          ? 'vxe-icon-arrow-up'
                          : 'vxe-icon-arrow-down' "></span>
            </el-tag>
            <div class="item-children" v-if="diag.isCollapse">
              <el-tag size="small" v-for="child in diag.diagnosTempList" :key="child.id" @click="showDiagDesc(child)">
                {{ child.tempName }}
                <span class="vxe-icon-copy" @click="addDiag(child.tempName)" style="background-color: greenyellow;"></span>
              </el-tag>
            </div>
          </div>
        </div>
      </Pane>
      <Pane>
        <el-divider content-position="left">
          {{
                diagDesc.tempName
                }}
        </el-divider>
        <div class="diag-desc" v-for="desc in diagDesc.descList" :key="desc.id">
          <el-tag type="info" size="small">
            <span style="margin-right:5px" v-html="
                      desc.descText
                        ? desc.descText.replace(/\n|\r\n/g, '<br>')
                        : ''
                    "></span>
            <el-button class="diag-btn" type="warning" @click="selectDiagDesc(desc)">替换</el-button>
            <el-button class="diag-btn" type="success" @click="addDiagDesc(desc)">追加</el-button>
          </el-tag>
        </div>
      </pane>
    </Splitpanes>
  </div>

</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch, getCurrentInstance,onMounted,onUnmounted } from 'vue';
import { IsEmpty } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import request from '@/api';
import { Splitpanes, Pane } from 'splitpanes';

let { proxy }: any = getCurrentInstance();
let drawerTemp = ref(false);
const showClassName = ref('');
let rowObj=reactive({});
//暴露属性和方法
defineExpose({
  initPage,
  colseTypeCodeDrawer
});

onMounted(() => {
  document.addEventListener('click', colseTypeCodeDrawer);
});

onUnmounted(() => {
  document.removeEventListener('click', colseTypeCodeDrawer);
});
function initPage(row: any) {
  diagDesc.tempName = '';
  diagDesc.descList.length = 0;
  rowObj = row;
  if(showClassName.value!=row.tempItemNo){
    findDiagnosTypeAndTemp();
    showClassName.value=row.tempItemNo;
  }
  drawerTemp.value = true;

}

let typeList: any = reactive([]); //最左侧字典分类列表数据
let diagDesc: any = reactive({
  tempName: '',
  descList: []
});

function findDiagnosTypeAndTemp() {
  typeList.length = 0; //放入数据前清空数据
  diagDesc = reactive({
    tempName: '',
    descList: []
  });
  const url = '/lab/diagnosType/findDiagnosTypeAndTemp';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        code: rowObj.typeCode
      }
    })
    .then((res: any) => {
      typeList.push(...res.data);
      for (let typeObj of typeList) {
        typeObj.isCollapse = false;
      }
    })
    .catch((err: any) => {
      VxeMessage('获取字典分类列表失败', VxeNotifyType.error);
    });
}

function showDiagDesc(diag) {
  diagDesc.tempName = diag.tempName;
  diagDesc.descList = diag.diagnosTempDescList;
}
function addDiag(diag) {
  rowObj.resultDesc=rowObj.resultDesc+diag;
  proxy.$emit('sltDiagnosTempInfo', rowObj);
  drawerTemp.value = false;
}
function selectDiagDesc(desc) {
  rowObj.resultDesc=desc.descText;
  proxy.$emit('sltDiagnosTempInfo', rowObj);
  drawerTemp.value = false;
}

function addDiagDesc(desc) {
  if(IsEmpty(rowObj.resultDesc)){
    rowObj.resultDesc="";
  }
  rowObj.resultDesc=rowObj.resultDesc+desc.descText;
  proxy.$emit('sltDiagnosTempInfo', rowObj);

  drawerTemp.value = false;
}

//可以考虑重写这个函数实现不依赖父组件
function colseTypeCodeDrawer(){
  if (drawerTemp.value &&
    !event.target.closest('#diagTeDrawerDiv')
    &&!event.target.closest('.'+rowObj.tempItemNo)) {
    drawerTemp.value = false;
    showClassName.value='';
  }
}
</script>

<style  lang="scss"  scoped>
#diagTeDrawerDiv {
  .mb10 {
    margin-bottom: 10px;
  }
  .no-data {
    width: 500px;
    height: 300px;
  }
  .el-main {
    padding: 0;
    overflow-y: auto;
  }
  .el-aside {
    border-left: $border-1;
  }
  .el-descriptions {
    width: 760px;
  }
  .el-descriptions-item__label {
    width: 70px;
  }
  .tools {
    padding-top: 0;
    margin-top: 0 !important;
    .btn-refresh {
      padding: 7px 15px;
    }
    .el-divider {
      margin-bottom: 15px;
      margin-top: 40px;
      width: 300px;
    }
    .content {
      width: 600px;
      .el-textarea__inner {
        font-size: 20px;
        // font-weight: bold;
      }
    }
    .large-img {
      width: 750px;
      height: 250px;
      margin-right: 10px;
      display: inline-block;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      position: relative;
      .camVideo {
        #video {
          width: 750px;
          height: 250px;
        }
        // #canvas {
        //   width: 670px;
        //   height: 400px;
        //   position: absolute;
        //   top: 0px;
        //   left: 0px;
        // }
        .btn {
          position: absolute;
          bottom: 20px;
          left: calc(50% - 50px);
          width: 100px;
          text-align: center;
          opacity: 0.8;
          z-index: 1;
        }
      }
      .no-data {
        width: 490px;
        height: 280px;
        img {
          object-fit: none;
        }
      }
      img {
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
      .el-image {
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
      .img-tools {
        position: absolute;
        top: 0px;
        right: -105px;
        .el-button {
          display: block;
          margin: 0 0 5px 0;
        }
      }
    }

    .img-list {
      width: 750px;
      height: 180px;
      overflow-x: auto;
      overflow-y: hidden;
      display: block;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px 5px 0 5px;
      margin-top: 5px;
      margin-bottom: 10px;
      position: relative;
      .el-upload-list__item {
        border: 0;
        width: 155px;
        height: 160px;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        border-radius: 0;
      }
      .el-upload-list__item-thumbnail {
        width: 140px;
        height: 140px;
        img {
          border-radius: 5px;
        }
      }
      .uploadImg {
        width: 75px;
        height: 75px;
        display: inline;
        margin-right: 10px;
        .el-upload--picture-card {
          width: 70px;
          height: 75px;
          line-height: 80px;
        }
      }
      .del-icon {
        position: absolute;
        right: 0;
        top: -4px;
        color: $info-color;
        opacity: 0.7;
        i {
          font-size: 16px;
        }
      }
      .ok-icon {
        position: absolute;
        right: 50px;
        bottom: -6px;
        color: $brand-color;
        i {
          font-size: 17px;
        }
      }
      .select-rpt {
        position: absolute;
        padding: 0;
        bottom: 0px;
        left: 30px;
        font-size: 16px;
      }
      .warning {
        color: $warning-color;
      }
    }

    .div-inline {
      display: inline-block;
      margin-right: 10px;
    }
  }

  .sign-img {
    width: 200px;
    height: 60px;
    border: $border-1;
  }
  .no-sign {
    color: $font-color-4;
    font-style: italic;
  }
  .img-diag {
    height: 90%;
    overflow: auto;
  }
  .el-drawer__header {
    margin-bottom: 5px;
  }
  .diag-temp {
    margin-top: 0px;
    .el-tag {
      height: 25px;
      line-height: 24px;
      cursor: pointer;
    }
    .diag-item {
      padding: 5px;
      .el-button {
        padding: 2px;
      }
      .item-children {
        margin: 5px 0 0 20px;
        .el-tag {
          margin-right: 10px;
        }
      }
    }
  }
  .diag-desc {
    line-height: 20px;
    font-size: 14px;
    padding: 5px 10px;
    .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-bottom: 1px;
      margin-right: 5px;
      border-radius: 4px;
      background-color: $font-color-3;
    }
    .el-tag {
      width: 100%;
      white-space: pre-wrap;
      height: auto;
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
  .diag-btn {
    padding: 2px 7px;
    margin-top: 3px;
  }
  .el-button--small {
    --el-button-size: 20px;
  }
  .el-divider {
    margin: 15px 5px;
  }
  .el-container {
    overflow-y: auto;
    .btn-viewtemp {
      position: absolute;
      top: 0;
      right: 10px;
    }
  }
}

.overlay {
  position: fixed;
  box-sizing: border-box;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: 3px 4px 16px 6px #858383;
  overflow: hidden;
  transition: all 0.3s;
  width: 26%;
  top: 100px;
  right: 1px;
  z-index: 9999;
  border: 2px solid #e6e6e6;
  height: calc(100% - 110px);
  margin-right: 80px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-in-out;
}
</style>
